<template>
  <div class="nature-list">
    <el-row type="flex" justify="end" align="middle" class="upload-position">
      <el-button type="primary" icon="el-icon-upload" size="small" @click="goAdd">补录</el-button>
      <ManyUpload kind="natures" :mid="mid" style="margin-left: 12px;margin-right: 12px;" />
      <el-button icon="el-icon-sort" size="small" @click="sort">修改排序</el-button>
    </el-row>
    <el-tabs v-model="active" type="card" @tab-click="handleClick" style="width:70%">
      <el-tab-pane v-for="(item, index) in tagArr" :key="index" :label="item.name" :name="item._id"></el-tab-pane>
    </el-tabs>

    <div class="grey-bg">
      <SlickList lockAxis="y" v-model="totalData">
        <SlickItem v-for="(item, index) in totalData" :index="index" :key="item.id">
          <el-row type="flex" align="middle" class="row-sty">
            <el-row type="flex" align="middle" style="min-width: 350px">
              <img :src="domain + item.src" alt height="64" />
              <p>
                {{ item.name }} <span>{{ item.alis }}</span>
              </p>
            </el-row>
            <el-row type="flex">
              <el-button type="info" size="mini" @click="getDetail(item)">查看</el-button>
              <el-button size="mini" type="danger" @click="handleEdit(index, item)">修改</el-button>
            </el-row>
          </el-row>
        </SlickItem>
      </SlickList>
    </div>

    <!-- 弹框 -->
    <el-dialog title="详情" :visible.sync="dialogVisible" width="60%">
      <el-form label-position="left" inline class="demo-table-expand">
        <el-form-item label="贴图">
          <img :src="domain + itemDetailData.src" alt height="64" />
        </el-form-item>
        <el-form-item label="名称">
          <span>{{ itemDetailData.name }}</span>
        </el-form-item>
        <el-form-item label="英文名">
          <span>{{ itemDetailData.alis }}</span>
        </el-form-item>
        <el-form-item label="类别">
          <span>{{ getTypeToString(itemDetailData.tag) }}</span>
        </el-form-item>
        <el-form-item label="伤害">
          <span>{{ itemDetailData.damage }}</span>
        </el-form-item>
        <el-form-item label="耐久">
          <span>{{ itemDetailData.durable }}</span>
        </el-form-item>
        <el-form-item label="防御">
          <span>{{ itemDetailData.defense }}</span>
        </el-form-item>
        <el-form-item label="影响理智">
          <span>{{ itemDetailData.san }}</span>
        </el-form-item>
        <el-form-item label="可合成科技">
          <el-row v-if="itemDetailData.createScience" type="flex" :gutter="20" style="flex-wrap: wrap">
            <el-col v-for="(item, key) in itemDetailData.createScience" :key="key">
              <el-row type="flex" align="middle">
                <img :src="
                    domain + item.item.src + '?x-oss-process=style/width-32'
                  " :alt="item.item.name" />
              </el-row>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="来源">
          <el-row v-if="itemDetailData.origin" type="flex" :gutter="20" style="flex-wrap: wrap">
            <el-col v-for="(item, key) in itemDetailData.origin" :key="key">
              <el-row type="flex" align="middle">
                <img :src="
                    domain + item.item.src + '?x-oss-process=style/width-32'
                  " :alt="item.item.name" />
              </el-row>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="防潮">
          <span>{{ itemDetailData.dampproof }}</span>
        </el-form-item>
        <el-form-item label="隔热">
          <span>{{ itemDetailData.thermalInsulation }}</span>
        </el-form-item>
        <el-form-item label="保暖">
          <span>{{ itemDetailData.keepWarm }}</span>
        </el-form-item>
        <el-form-item label="生成代码">
          <span>{{ itemDetailData.console }}</span>
        </el-form-item>
        <el-form-item label="介绍">
          <span>{{ itemDetailData.introduce }}</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import { SlickList, SlickItem } from "vue-slicksort";
  import ManyUpload from '@/components/ManyUpload'
  export default {
    props: {
      mid: String,
    },
    components: {
      SlickList,
      SlickItem,
      ManyUpload
    },
    data() {
      return {
        tagArr: [],
        currentTag: "",
        dialogVisible: false,
        loading: false,
        active: "",
        totalData: [], // 获取总数据
        itemDetailData: {},
        origins: [],
        createSciences: [],
        attrs: [],
      };
    },
    async activated() {
      await this.getTag();
      this.fetchData();
    },
    watch: {
      "$store.state.version": function () {
        this.fetchData();
      },
    },
    methods: {
      async sort() {
        if (!this.currentTag) {
          return this.$message.warning("请先选择标签！");
        }
        let ids = this.totalData.map((val) => {
          return val._id;
        });
        let res = await this.axios.post("sort", {
          module: "nature",
          tagId: this.currentTag,
          ids,
        });
        if (res.data.code == 0) {
          this.$message.success(res.data.message);
        }
      },
      getTypeToString(tagArr) {
        if (!tagArr) {
          return;
        }
        let temp = tagArr.map((val) => {
          return val.name;
        });
        return temp.join(",");
      },
      /**
       * @description 获取自然对应的标签
       */
      async getTag() {
        let res = await this.$store.dispatch("getTags", {
          kind: "natures",
          mid: this.mid,
        });
        this.tagArr = res.filter((val) => {
          return val.showType != "2";
        });
        this.tagArr.unshift({
          _id: "",
          name: "未添加标签",
        });
        // this.currentTag = this.tagArr[0]._id;
        this.active = this.tagArr[0]._id;
      },
      /**
       * 获取列表数据
       **/
      fetchData() {
        this.loading = true;
        this.axios
          .get("nature", {
            params: {
              version: this.$store.state.version,
              tagId: this.currentTag,
            },
          })
          .then((res) => {
            this.totalData = res.data;
            this.loading = false;
          });
      },
      /**
       * 获取详情数据
       **/
      fetchDetail(id) {
        return this.axios.get("nature/single", {
          params: {
            id,
          },
        });
      },
      /**
       * 类别切换
       * @param tab
       */
      handleClick(tab) {
        this.currentTag = tab.name;
        this.fetchData();
      },
      /**
       * 查看按钮点击事件
       * @param row
       * @return {Promise<void>}
       */
      handleEdit(index, row) {
        this.$router.push({
          path: "/NatureAddOrEdit",
          query: {
            type: "edit",
            id: row._id,
            mid: this.mid,
          },
        });
      },
      async getDetail(row) {
        let res = await this.fetchDetail(row._id);
        this.itemDetailData = res.data;
        this.dialogVisible = true;
      },
      goAdd() {
        this.$router.push({
          path: "/NatureAddOrEdit",
          query: {
            mid: this.mid,
          },
        });
      },
    },
  };
</script>

<style lang="scss">
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 120px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  .margin-right-12 {
    display: inline-block;
  }

  .row-sty {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid #ededed;
    background-color: #fff;

    img {
      width: 36px;
      height: auto;
    }

    p {
      font-size: 14px;
      color: #333;
      margin-left: 12px;

      span {
        font-size: 12px;
        color: #999;
        margin-left: 8px;
      }
    }
  }
</style>
<style lang="scss" scoped>
  .nature-list {
    position: relative;
    padding: 16px;

    .basic-attribute {
      height: 60px !important;
    }

    .margin-right-12 {
      margin-right: 12px;
    }

    .not-have {
      // display: flex;
    }

    .upload-position {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 1;
    }

    .origin-img,
    .material-img {
      width: 32px;
    }
  }
</style>